<template>
    <div class="list" v-if="!loading" :class="{nodata:!listpage.list.length}">
      <a-row :gutter="16">
        <a-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="(library, index) in listpage.list"
          :key="index"
        >
          <a-card style="margin-bottom: 16px; background-color: #fafafa;" class="mycard" hoverable>
            <div class="name">{{ library.questionTypeName }}</div>
            <div class="num">收藏数量: <span class="numnum">{{ library.questionNum }}</span></div>
            <div class="myButton" @click="toExer(library)">查看试题</div>
          </a-card>
        </a-col>
      </a-row>
      <el-empty class="testInfoempty" :image-size="240"  v-if="!listpage.list.length" description="暂无收藏，快去收藏一些吧" />
    </div>
    <a-skeleton active v-else/>
    <!-- <el-pagination 
            v-model:current-page="listpage.curPage"
            v-model:page-size="listpage.pageSize" 
            :total="listpage.total" 
            background
            layout="prev, pager, next" 
            :hide-on-single-page="true" 
            @size-change="query"
            @current-change="query"
            @prev-click="query"
            @next-click="query"
        /> -->
</template>
  
<script lang="ts" setup>
import http from "@/request";
import { useDictStore } from "@/stores/dict";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
import { onMounted, reactive, watch,ref } from "vue";
import { useRouter, useRoute } from "vue-router";


//  定义变量

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const listpage = reactive({
  // 分页列表
  curPage: 1,
  pageSize: 12,
  total: 0,
  list: [] as any[],
});

// 组件挂载完成后，执行如下方法
onMounted(() => {
  query();
});

// 如果是跳转到列表页，重新查询
watch(
  () => route.path,
  (n, o) => {
    if (n === "/myExer") {
      query();
    }
  }
);

// 查询
async function query() {
  loading.value = true;
  const {
    data: { code, data },
  } = await http.post("myCollect/listpage", {
    type: 2,
  });

  if (code !== 200) {
    return;
  }
  loading.value = false;
  listpage.list = data.list;
  listpage.total = data.total;
}

// 练习进入
async function toExer(exer: any) {
  router.push(`/myCollect/paper/${exer.id}`);
}
</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 190px);
  padding-top: 20px;
  :deep .ant-row{
    width: 100%;
  }
}
.nodata{
  justify-content: center;
}
.mycard{
    :deep .ant-card-body{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        text-align: center;
        align-items: center;
    }   
    .name{
        font-size: 16px;
        font-weight: 600;
        margin-top: 10px;
    }
    .num{
        font-size: 14px;
        color: #333;
        margin-top: 10px;
    }
    .numnum{
        font-size: 18px;
        color: #46a6ff;
    }
    .myButton{
        margin-top: 10px;
        width: 120px;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        background: linear-gradient(to right, #24b0fb, #1c90fa);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        &:hover{
            background-color: #46a6ff;
        }
    }
}
</style>
  